<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>login-plz</title>
		<link rel="shortcut icon" href="favicon.ico"/>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				background-image: url(img/login-img/bgimage.png);
			}
			
			.login-1 {
				width: 452px;
				min-height: 550px;
				width: 450px;
				border: 1px solid #dadada;
				border-radius: 10px;
				top: 50%;
				left: 50%;
				margin-left: -225px;
				position: absolute;
				display: block;
				margin-top: -324px;
				background: url(img/login-img/div-bgimage.png) #fff bottom repeat-x;
				box-shadow: 0 9px 30px -6px rgba(0, 0, 0, .2), 0 18px 20px -10px rgba(0, 0, 0, .04), 0 18px 20px -10px rgba(0, 0, 0, .04), 0 10px 20px -10px rgba(0, 0, 0, .04);
			}
			
			.login-1-title {
				width: 450px;
				height: 92px;
				/*background-color: pink;*/
				margin-top: 23px;
				margin-bottom: 50px;
				padding-top: 75px;
				position: relative;
				background-image: url(img/login-img/logo.png);
				background-size: 160px;
				background-position: top center;
				background-repeat: no-repeat;
			}
			
			.login-1-title h4 {
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 20px;
				text-align: center;
				line-height: 1em;
				height: auto;
				color: #333;
				font-weight: 400;
				/*background-color: black;*/
			}
			
			.login-1-content {
				padding: 0 40px 22px;
				/*background-color: red;*/
			}
			
			.login-form-inputs li {
				list-style-type: none;
				margin-bottom: 15px;
			}
			
			.login-form-inputs .icon {
				border-radius: 6px 0 0 6px;
				border-right: solid 1px #ccc;
				box-shadow: 1px 0 3px -1px rgba(0, 0, 0, .1);
				float: left;
				height: 46px;
				width: 46px;
				background: #f8f8f8, #fafafa;
				overflow: hidden;
			}
			
			.input .icon i {
				background-image: url(img/login-img/icon.png);
				background-position: -1px 0;
				cursor: pointer;
				display: block;
				height: 46px;
				text-indent: -9999em;
				width: 46px;
			}
			
			.input input {
				width: 293px;
				height: 20px;
				padding: 12px 12px 12px 15px;
				background: rgba(255, 255, 255, 0);
				border: none;
				color: #333;
				font-size: 16px;
				position: relative;
				z-index: 10;
				outline: none;
			}
			
			.input {
				background: #fff;
				box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
				border: #ccc solid 1px;
				border-radius: 6px;
				font-size: 18px;
				height: 46px;
				line-height: 46px;
				opacity: .618;
				position: relative;
			}
			
			.login-input-pwd .icon i {
				background-position: -49px 0;
			}
			
			.remember {
				margin: 15px 5px 25px;
				height: 12px;
			}
			
			.auto {
				color: #999;
				float: left;
				font-size: 12px;
				cursor: pointer;
				/*padding-left: 22px;*/
			}
			
			.auto .checkbox {
				/*position: absolute;*/
				/*top: -4px;*/
				/*left: -2px;*/
				background-image: url(img/login-img/check.png);
				/*background-position: 0 -18px;*/
				float: left;
				display: inline-block;
				width: 20px;
				height: 20px;
				background-position: 0 -18px;
			}
			
		</style>
	</head>

	<body>
		<div class="login-1">
			<div class="login-1-title">
				<h4>使用 Smartisan ID 登录官网</h4>
			</div>
			<div class="login-1-content">
				<form class="login-form">
					<ul class="login-form-inputs">
						<li class="login-input-username">
							<div class="input">
								<span class="icon">
									<i>手机号</i>
								</span>
								<input type="text" name="username" id="username" placeholder="手机号/邮箱" />
							</div>
						</li>
						<li class="login-input-pwd">
							<div class="input">
								<span class="icon">
									<i>密码</i>
								</span>
								<input type="password" name="pwd" id="pwd" placeholder="密码" />
							</div>
						</li>
						<li class="remember">
							<div class="auto">
								<span class="checkbox">
								</span> 自动登陆
							</div>
							<!--<a href="#">忘记密码？</a>
							<a href="#">注册 Smartisan ID</a>-->
						</li>
					</ul>
				</form>
			</div>
		</div>
	</body>

</html>